﻿<! DOCTYPE html>
<html>
<head>
    <title>报表</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <script src="~/Scripts/jquery-easyui/jquery.min.js"></script>
    <script src="~/Scripts/echarts.js"></script>
</head>
<body>
    <div id="charts_div" style="height: 550px;"></div>
    <pre style="margin: -15px 0px 0px 20px;font-size: 14px;">
   图例：<span style="display: inline-block;width: 20px;height: 10px;background-color:green "></span>计划时长 <span style="display: inline-block;width: 20px;height: 10px;background-color:red "></span>已完成阶段的实际时长 <span style="display: inline-block;width: 20px;height: 10px;background-color:yellow "></span>未完成阶段的实际时长
  </pre>
    
    <script language="javascript">
        //require.config({
        //    paths: {
        //        echarts: 'dist'
        //    }
        //});
        function dateAfter(dateStr, num) {
            var date1 = new Date(Date.parse(dateStr.replace(/-/g, "/")));
            //alert(date1.getFullYear()+"-"+(date1.getMonth()+1)+"-"+date1.getDate());
            var date2 = new Date(date1);
            date2.setDate(date1.getDate() + num);
            var times = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
            return times;
        }
        function GetDateDiff(startDate, endDate) {
            var startTime = new Date(Date.parse(startDate.replace(/-/g, "/"))).getTime();
            var endTime = new Date(Date.parse(endDate.replace(/-/g, "/"))).getTime();
            var dates = (startTime - endTime) / (1000 * 60 * 60 * 24);
            return dates;
        }


        //var url = "${path}/notice/groupFirstCheckNotice!initGantt.action?projectId=${resultjson.projectId}";
        var url = "/Project/PMGanttJson?view=ProjectGantt&rows=3";
        //paradata: { view: "ProjectGantt", rows:6 },
        var totalCategory = 0, category = [], planData = [], planBase = [], actualData = [], actualBase = [], legend = [];
        var globalmin = null;
        var json_demo = {
            "currStageIndexList": [
             8,
             9
            ],
            "currStageList": [
             "初步验收",
             "试运行"
            ],
            "stageList": [
             {
                 "planBeginDate": "2016-08-31",
                 "name": "设计审查",
                 "endDate": "2016-06-22",
                 "beginDate": "2016-04-22",
                 "planEndDate": "2016-10-05"
             },
             {
                 "planBeginDate": "2016-10-05",
                 "name": "设计批复",
                 "endDate": "2016-011-22",
                 "beginDate": "2016-04-22",
                 "planEndDate": "2016-10-12"
             },
             {
                 "planBeginDate": "2016-10-12",
                 "name": "工程交接",
                 "endDate": "2016-04-22",
                 "beginDate": "2016-04-22",
                 "planEndDate": "2016-10-26"
             },
             {
                 "planBeginDate": "2016-10-26",
                 "name": "设备到货验收",
                 "endDate": "2016-04-22",
                 "beginDate": "2016-04-22",
                 "planEndDate": "2016-11-25"
             },
             {
                 "planBeginDate": "2016-11-25",
                 "name": "开工启动",
                 "endDate": "2016-04-22",
                 "beginDate": "2016-04-22",
                 "planEndDate": "2016-12-25"
             },
             {
                 "planBeginDate": "2016-12-25",
                 "name": "设备安装",
                 "endDate": "2016-04-22",
                 "beginDate": "2016-04-22",
                 "planEndDate": "2017-01-01"
             },
             {
                 "planBeginDate": "2017-01-01",
                 "name": "系统调测",
                 "endDate": "2016-04-22",
                 "beginDate": "2016-04-22",
                 "planEndDate": "2017-01-08"
             },
             {
                 "planBeginDate": "2017-01-08",
                 "name": "割接上线",
                 "endDate": "2016-04-22",
                 "beginDate": "2016-04-22",
                 "planEndDate": "2017-01-15"
             },
             {
                 "planBeginDate": "2017-01-15",
                 "name": "初步验收",
                 "endDate": "2017-04-17",
                 "beginDate": "2017-01-22",
                 "planEndDate": "2017-04-15"
             },
             {
                 "planBeginDate": "2017-04-15",
                 "name": "试运行",
                 "endDate": "2017-11-17",
                 "beginDate": "2017-05-12",
                 "planEndDate": "2017-10-12"
             },
             {
                 "planBeginDate": "2017-10-12",
                 "name": "竣工验收",
                 "endDate": "",
                 "beginDate": "",
                 "planEndDate": "2017-12-11"
             }
            ],
            "projectId": 8211
        }

        //{"total": 26,"rows":[{"code":"FSK2019003","name":"SEM3085中包快换机构","mgr":"吴建军","desc":"","series":[{"name":"项目商务","exec":"孙英国","time":"08/21-09/30","start0":"2019/08/21","end0":"2019/09/30","start":"2019/11/11","end":"2019/11/11"},{"name":"合同签订","exec":"孙英国","time":"10/01-10/31","start0":"2019/10/01","end0":"2019/10/31","start":"2019/11/11","end":"2019/11/11"},{"name":"项目设计","exec":"吴建军","time":"03/01-04/10","start0":"2019/03/01","end0":"2019/04/10","start":"2019/11/11","end":"2019/11/11"},{"name":"生产制造","exec":"制造部","time":"04/10-09/10","start0":"2019/04/10","end0":"2019/09/10","start":"2019/11/11","end":"2019/11/11"},{"name":"现场施工","exec":"制造部","time":"11/01-11/30","start0":"2019/11/01","end0":"2019/11/30","start":"2019/11/11","end":"2019/11/11"}]}]}

        $.getJSON(url, function (jsonRaw) {

            var json= {
                "currStageIndexList": [
                 8,
                 9
                ],
                "currStageList": [
                 "初步验收",
                 "试运行"
                ],
                "stageList": [
                 //{
                 //    "planBeginDate": "2016-08-31",
                 //    "name": "设计审查",
                 //    "endDate": "2016-06-22",
                 //    "beginDate": "2016-04-22",
                 //    "planEndDate": "2016-10-05"
                 //},
                
                ],
                "projectId": 8211
            }

            json.currStageIndexList = [];
            json.currStageList = [];
            json.projectId = jsonRaw.rows[0].code;//project code
            var project = jsonRaw.rows[1];
            for (var i in project["series"]) {
                json.stageList.push({
                    "name": project["series"][i].name,
                    "planBeginDate": project["series"][i].start0,
                    "planEndDate": project["series"][i].end0,                   
                    "beginDate": project["series"][i].start,
                    "endDate": project["series"][i].end,                   
                });
            }
           

            $(function () {
                if (json && json.stageList) {
                    totalCategory = json.stageList.length;
                    var minPlan = null, minActual = null, max = null;
                    for (var i = (totalCategory - 1) ; i >= 0; i--) {
                        var planStart = json.stageList[i].planBeginDate;
                        var actualStart = json.stageList[i].beginDate;
                        if (i == (json.stageList.length - 1)) {
                            var dateTT = new Date();
                            var dstr = dateTT.getFullYear() + "-" + (dateTT.getMonth() + 1) + "-" + dateTT.getDate()
                            minPlan = planStart || dstr;
                            minActual = actualStart || dstr;
                            max = planStart;
                        }
                        if (GetDateDiff(max, json.stageList[i].planEndDate) < 0) {
                            max = json.stageList[i].planEndDate;
                        }
                        if (GetDateDiff(max, json.stageList[i].endDate) < 0) {
                            max = json.stageList[i].endDate;
                        }
                        if (GetDateDiff(minPlan, planStart) > 0) {
                            minPlan = planStart;
                        }
                        if (GetDateDiff(minActual, actualStart) > 0) {
                            minActual = actualStart;
                        }
                    }

                    var min = null;
                    if (GetDateDiff(minPlan, minActual) >= 0) {
                        min = minActual;
                    } else {
                        min = minPlan;
                    }
                    globalmin = min;
                    for (var i = (totalCategory - 1) ; i >= 0; i--) {
                        var planStart = json.stageList[i].planBeginDate;
                        var planEnd = json.stageList[i].planEndDate;
                        var actualStart = json.stageList[i].beginDate;
                        var actualEnd = json.stageList[i].endDate;

                        category.push(json.stageList[i].name);
                        planBase.push(GetDateDiff(planStart, globalmin));
                        var pd = {};
                        pd.value = GetDateDiff(actualEnd, actualStart);
                        pd.color = '#FF0000';
                        var currentStage = json.currStageList;
                        var sName = json.stageList[i].name;
                        if (currentStage && $.inArray(sName, currentStage) > -1) {
                            pd.color = '#FFFF00';
                        }
                        planData.push(GetDateDiff(planEnd, planStart));
                        actualBase.push(GetDateDiff(actualStart, globalmin));
                        actualData.push(pd);

                    }
                    for (var i = 0; i < GetDateDiff(max, min) ; i++) {
                        var dt = dateAfter(min, i);
                        legend.push(dt);
                    }
                    init();
                }
            });
            function init() {
                //require(
                //           [
                //               'echarts',
                //               'echarts/chart/bar'
                //           ],
                //自建项目饼状图设置
                //function () {
                var myChart = echarts.init(document.getElementById('charts_div'));
                var option = {
                    title: {
                        text: '',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (params) {
                            var tar0 = params[0];
                            var tar1 = params[1];
                            var tar2 = params[2]
                            var tar3 = params[3];
                            var result = tar2.seriesName + ' : ' + dateAfter(globalmin, tar2.value - 0) + '<br/>' +
                                tar3.seriesName + ' : ' + dateAfter(globalmin, tar2.value + tar3.value) + '<br/>' +
                                tar0.seriesName + ' : ' + dateAfter(globalmin, tar0.value - 0) + '<br/>' +
                                tar1.seriesName + ' : ' + dateAfter(globalmin, tar0.value + tar1.value);
                            return result;
                        }
                    },
                    xAxis: [
                        {
                            type: 'value',
                            splitNumber: legend.length - 1,
                            max: legend.length - 1,
                            axisLabel: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: legend
                        }
                    ],
                    yAxis: [
                        {
                            type: 'category',
                            splitLine: { show: false },
                            data: category
                        }
                    ],
                    series: [
                        {
                            name: '实际开始时间',
                            type: 'bar',
                            stack: '总量1',
                            itemStyle: {
                                normal: {
                                    barBorderColor: 'rgba(0,0,0,0)',
                                    color: 'rgba(0,0,0,0)'
                                },
                                emphasis: {
                                    barBorderColor: 'rgba(0,0,0,0)',
                                    color: 'rgba(0,0,0,0)'
                                }
                            },
                            data: actualBase
                        },
                        {
                            name: '实际完成时间',
                            type: 'bar',
                            stack: '总量1',
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        //alert(JSON.stringify(params));
                                        return params.data.color;
                                    }, label: { show: true, position: 'inside' }
                                }
                            },
                            data: actualData
                        },
                        {
                            name: '计划开始时间',
                            type: 'bar',
                            stack: '总量',
                            itemStyle: {
                                normal: {
                                    barBorderColor: 'rgba(0,0,0,0)',
                                    color: 'rgba(0,0,0,0)'
                                },
                                emphasis: {
                                    barBorderColor: 'rgba(0,0,0,0)',
                                    color: 'rgba(0,0,0,0)'
                                }
                            },
                            data: planBase
                        },
                        {
                            name: '计划完成时间',
                            type: 'bar',
                            stack: '总量',
                            itemStyle: {
                                normal: {
                                    color: '#00AA55',
                                    label: {
                                        show: true,
                                        position: 'inside'
                                    }
                                }
                            },
                            data: planData
                        }
                    ]
                };
                myChart.setOption(option);

                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }
            //);

            //}
        });//ajax json data
    </script>
</body>

</html>